<aside class="model-properties" data-ng-class="{'active': $ctrl.visible}">

	<span class="action" data-ng-click="$ctrl.changeVisible()">
		<i class="fa angle-double-icon" data-ng-class="!$ctrl.visible ? 'fa-angle-double-left' : 'fa-angle-double-right'"></i>
	</span>

	<div class="properties-content old">

		<div class="form-group" ng-if="$ctrl.configuration.emptyState">
			<div class="empty-state">
				<i class="fa fa-mouse-pointer" aria-hidden="true"></i>
				<p>{{ 'Select an element to edit' | translate }}</p>
			</div>
		</div><!-- End .form-group -->

		<div class="form-group" ng-if="($ctrl.configuration.entity && $ctrl.visible)">
			<div class="form-group">
				<label for="entry-name">{{ 'Name' | translate }}</label>
				<input id="entry-name" type="text" class="form-control" data-ng-model="$ctrl.selectedElement.value"
					ng-change="$ctrl.updateName($ctrl.selectedElement.value)" autofocus/>
			</div><!-- End .form-group -->

			<div class="form-group clearfix">
				<label for="">{{ 'Specialize' | translate }}</label>
				<dropdown on-select="$ctrl.extendEntity(selected)" selected="{name: 'Selecione', type: 'empty'}"
					options="[{name: '(t, d)', type: '(t, d)'}, {name: '(t, c)', type: '(t, c)'}, {name: '(p, d)', type: '(p, d)'}, {name: '(p, c)', type: '(p, c)'}]">
				</dropdown>
			</div>

			<div class="form-group">
				<label for="">{{ 'Self relationship' | translate }}</label>
				<div>
					<a class="br-button" ng-click="$ctrl.addAutoRelationship()">{{ 'Add' | translate }}</a>
				</div>
			</div>
		</div><!-- End .form-group -->

		<!-- ########## start notes ######## -->
		<div class="form-group" ng-if="($ctrl.configuration.note && $ctrl.visible)">
			<note-editor selected="$ctrl.selectedElement"></note-editor>
		</div><!-- End .form-group -->

		<div class="form-group" ng-if="($ctrl.configuration.link && $ctrl.visible)">
			<div class="form-group clearfix">
				<label for="">{{ 'Cardinality' | translate }}</label>
				<dropdown on-select="$ctrl.updateCardinality(selected)"
					selected="{name: $ctrl.selectedElement.value.cardinality, type: $ctrl.selectedElement.value.cardinality}"
					options="[{name: '(0, n)', type: '(0, n)'}, {name: '(0, 1)', type: '(0, 1)'}, {name: '(1, 1)', type: '(1, 1)'}, {name: '(1, n)', type: '(1, n)'}]">
				</dropdown>
			</div>

			<div class="form-group">
				<label for="entry-name">{{ 'Role' | translate }}</label>
				<input id="entry-name" type="text" class="form-control" data-ng-model="$ctrl.selectedElement.value.role"
					ng-change="$ctrl.updateLinkRole($ctrl.selectedElement.value.role)" />
			</div><!-- End .form-group -->

			<div class="form-group">
				<div class="checkbox">
					<label for="weak">
						<input id="weak" type="checkbox" ng-model="$ctrl.selectedElement.value.weak"
							ng-click="$ctrl.updateLinkWeak(!$ctrl.selectedElement.value.weak)" />{{ 'Weak' | translate }}
					</label>
				</div>
			</div><!-- End .form-group -->
		</div><!-- End .form-group -->

		<div class="form-group" ng-if="($ctrl.configuration.extension && $ctrl.visible)">
			<div class="form-group clearfix">
				<label for="">{{ 'Edit' | translate }}</label>
				<dropdown on-select="$ctrl.editExtention(selected.type)"
					selected="{name: $ctrl.selectedElement.value, type: $ctrl.selectedElement.value}"
					options="[{name: '(t, d)', type: '(t, d)'}, {name: '(t, c)', type: '(t, c)'}, {name: '(p, d)', type: '(p, d)'}, {name: '(p, c)', type: '(p, c)'}]">
				</dropdown>
			</div>
		</div><!-- End .form-group -->

		<div class="form-group" ng-if="($ctrl.configuration.attribute && $ctrl.visible)">
			<div class="form-group">
				<label for="entry-name">{{ 'Name' | translate }}</label>
				<input id="entry-name" type="text" class="form-control" data-ng-model="$ctrl.selectedElement.value.name"
					ng-change="$ctrl.updateAttributeName($ctrl.selectedElement.value.name)" autofocus/>
			</div>
			<div class="form-group clearfix">
				<label for="">{{ 'Cardinality' | translate }}</label>
				<dropdown on-select="$ctrl.updateAttributeCardinality(selected)"
					selected="{name: $ctrl.selectedElement.value.cardinality, type: $ctrl.selectedElement.value.cardinality}"
					options="[{name: '(0, n)', type: '(0, n)'}, {name: '(0, 1)', type: '(0, 1)'}, {name: '(1, 1)', type: '(1, 1)'}, {name: '(1, n)', type: '(1, n)'}]">
				</dropdown>
			</div>
			<div class="checkbox">
				<label for="compound">
					<input
						id="compound"
						type="checkbox"
						ng-model="$ctrl.selectedElement.value.composed"
						ng-change="$ctrl.swapComposed($ctrl.selectedElement.value.composed)"
					> {{ 'Composed' | translate }}
				</label>
			</div>
		</div><!-- End .form-group -->

		<div class="form-group" ng-if="($ctrl.configuration.key && $ctrl.visible)">
			<label for="entry-name">{{ 'Name' | translate }}</label>
			<input id="entry-name" type="text" class="form-control" data-ng-model="$ctrl.selectedElement.value"
				ng-change="$ctrl.updateName($ctrl.selectedElement.value)" autofocus/>
		</div><!-- End .form-group -->

		<div class="form-group" ng-if="($ctrl.configuration.relationship && $ctrl.visible)">
			<div class="form-group">
				<label for="entry-name">{{ 'Name' | translate }}</label>
				<input id="entry-name" type="text" class="form-control" data-ng-model="$ctrl.selectedElement.value"
					ng-change="$ctrl.updateName($ctrl.selectedElement.value)" autofocus/>
			</div><!-- End .form-group -->

			<div class="form-group">
				<label for="">{{ 'Associative entity' | translate }}</label>
				<div>
					<a class="br-button" ng-click="$ctrl.transformAssociative()">{{ 'Transform' | translate }}</a>
				</div>
			</div>
		</div>

	</div><!-- End .properties-content -->
</aside><!-- End .model-properties -->